<template>
  <view class="chart-box">
    <qiun-data-charts
      type="area"
      :opts="opts"
      :chartData="chartData"
      :canvas2d="true"
      canvasId="charts"
    />
  </view>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  type: {
    type: String,
    default: "line",
  },
  data: {
    type: Object,
    required: true,
  },
  height: {
    type: String,
    default: "400rpx",
  },
});

// 转换数据格式
const chartData = computed(() => ({
  categories: props.data.categories,
  series: props.data.series,
}));

// 图表配置
const opts = computed(() => ({
  color: ["#40A9FF"],
  padding: [15, 15, 0, 15],
  enableScroll: true,
  legend: {
    show: false,
  },
  xAxis: {
    disableGrid: true,
    fontSize: 12,
    color: "#999999",
  },
  yAxis: {
    gridType: "dash",
    dashLength: 2,
    data: {
      min: 0,
    },
    fontSize: 12,
    color: "#999999",
  },
  extra: {
    area: {
      type: "straight",
      opacity: 0.2,
      addLine: true,
      width: 2,
      gradient: true,
    },
    column: {
      width: 20,
      borderRadius: 4,
    },
  },
}));
</script>

<style lang="scss">
.chart-box {
  width: 100%;
  height: v-bind(height);
  background: #ffffff;
}
</style>
